<template>
  <div class="app-container">
    <div v-if="editorVisible" class="wf-edior">
      <el-dialog :title="myForm.name" :visible.sync="editorVisible" fullscreen>
        <design :title="myForm.name" />
      </el-dialog>
    </div>
    <!-- 字典列表 -->
    <el-row :gutter="10">
      <el-col
        :xs="24"
        :sm="24"
        :md="10"
        :lg="24"
        :xl="24"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <!--工具栏-->
          <div class="head-container">
            <!-- 搜索 -->
            <el-input
              v-model="query.name"
              clearable
              size="small"
              placeholder="输入名称搜索"
              style="width: 200px"
              class="filter-item"
              @keyup.enter.native="getData"
            />
            <span>
              <el-button
                class="filter-item"
                size="mini"
                type="success"
                icon="el-icon-search"
                @click="getData"
                >搜索</el-button
              >
              <el-button
                class="filter-item"
                size="mini"
                type="warning"
                icon="el-icon-refresh-left"
                @click="resetReloadPage"
                >重置</el-button
              >
            </span>
          </div>
          <!--表单渲染-->
          <el-dialog
            append-to-body
            :close-on-click-modal="false"
            :visible.sync="addShow"
            :title="myTitle"
            width="570px"
          >
            <el-form
              ref="form"
              :inline="true"
              :model="myForm"
              :rules="rules"
              size="small"
              label-width="80px"
            >
              <el-form-item label="表单名称" prop="name">
                <el-input v-model="myForm.name" style="width: 380px" />
              </el-form-item>
              <el-form-item label="表单编码" prop="code">
                <el-input v-model="myForm.code" style="width: 380px" />
              </el-form-item>
              <el-form-item label="描述" prop="tips">
                <el-input v-model="myForm.tips" style="width: 380px" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" plain @click="addShow = false"
                >取消</el-button
              >
              <el-button
                type="primary"
               
                >确认</el-button
              >
            </div>
          </el-dialog>
          <!--表格渲染-->
          <el-table
            ref="table"
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            @select="selectFuc"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="name"
              label="表单名称"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="code"
              label="表单编码"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="tips"
              label="描述"
            />
            <el-table-column
              label="操作"
              width="160px"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="success"
                  icon="el-icon-edit-outline"
                  size="mini"
                  @click="toGenForm(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <!--分页组件-->
          <el-pagination
            :page-size="page.size"
            :total="page.total"
            :current-page="page.page"
            style="margin-top: 8px"
            layout="total, prev, pager, next, sizes"
            @size-change="sizeChangeHandler($event)"
            @current-change="pageChangeHandler"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crudForm from "@/api/system/form";
import design from "../design";



export default {
  name: "Form",
  components: { design },
  data() {
    return {
      loading: true,
      myTitle: "",
      myForm:  { id: null, code: null, name: null, tips: null },
      selections: [], //选中的数据
      addShow: false, //用来弹窗显示
      page: {
        size: 10,
        total: 0,
        page: 1,
      },
      query: { name: "" },
      tableData: [],

      editorVisible: false,
      permission: {
        add: ["admin"],
        edit: ["admin"],
        del: ["admin"],
      },
      rules: {
        name: [
          { required: true, message: "请输入表单名称", trigger: "blur" },
          {
            min: 0,
            max: 40,
            message: "长度在 1 到 40 个字符",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入表单编码", trigger: "blur" }],
      },
    };
  },
  mounted(){
    this.getData()
  },
  methods: {
      //重置搜索
    resetReloadPage() {
      // this.selections=[]
      // this.$forceUpdate()
      this.page = {
        size: 10,
        total: 0,
        page: 1,
      };
      this.query = { name: "" };
      this.getData();
    },
    getData() {
      this.query.pageNo = this.page.page-1;
      this.query.pageSize = this.page.size;
      this.loading = true;
      crudForm.getPage(this.query).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.tableData = res.data.content;
          this.page.total = res.data.totalElements;
        }
      });
    },
    toGenForm(data) {
      this.myForm = data;
      this.editorVisible = true;
    },
    selectFuc(selection, row) {
      let oldSelect = this.$refs.table.selection;
      if (oldSelect.length === 0) {
        this.$refs.table.toggleRowSelection(row, false);
      } else {
        this.handleCurrentChange(row, selection[0]);
      }
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.page.page = e;
      this.getData();
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.page.size = e;
      this.page.page = 1;
      this.getData();
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

